<template>
  <div style="margin-top: 10px">
    <el-table
      v-loading="loading"
      :data="users"
      stripe
      border
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="username"
        fixed
        align="left"
        label="用户名"
        width="90"
      />
      <el-table-column
        prop="id"
        label="用户ID"
        align="left"
        width="85"
      />
      <el-table-column
        prop="name"
        label="昵称"
        align="left"
        width="85"
      />
      <el-table-column
        label="是否可用"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="是否锁定"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.locked"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        align="left"
        width="125"
      />
      <el-table-column
        prop="telephone"
        label="移动电话"
        align="left"
        width="125"
      />
      <el-table-column
        prop="address"
        width="100"
        align="left"
        label="地址"
      />
      <el-table-column
        width="120"
        label="头像"
      >
        <template slot-scope="scope">
          <el-popover
            popper-class="popover-image"
            placement="top-start"
            width="100"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          >
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.userface"
            />
            <el-button slot="reference">
              点击查看
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="first_time"
        :formatter="dateFormat"
        width="160"
        label="创建时间"
      />
      <el-table-column
        prop="last_time"
        :formatter="dateFormat"
        width="160"
        label="近期登录时间"
      />
      <el-table-column
        width="100"
        align="left"
        label="使用时长"
      >
        <template slot-scope="scope">
          <el-tag>{{ $moment(scope.row.first_time).toNow() }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        align="left"
        width="150"
      />
      <el-table-column
        fixed="right"
        width="200"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            style="padding: 3px"
            size="mini"
            @click="editUser(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            style="padding: 3px"
            size="mini"
            type="primary"
            @click="advanceUser(scope.row)"
          >
            查看高级资料
          </el-button>
          <el-button
            style="padding: 3px"
            size="mini"
            type="danger"
            @click="deleteUser(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end">
      <el-pagination
        background
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :total="total"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script>
    export default {
        name: "UserTable",
        props:{
            users:{
                type:Array,
                default:()=>[{
                  address: "深圳南山",
                  authorities: [],
                  enable: true,
                  first_time: 1595619639000,
                  id: 1,
                  last_time: 1595619641000,
                  locked: false,
                  name: "系统管理员",
                  phone: "18568887789",
                  telephone: "029-82881234",
                  userface: "http://bpic.588ku.com/element_pic/01/40/00/64573ce2edc0728.jpg",
                  username: "admin"}]
            },
            total:{
                type:Number,
                default:1
            },
            loading:{
                type:Boolean,
                default:false
            },
            editUser:{
                type:Function,
                default:()=>{}
            },
            advanceUser:{
                type:Function,
                default:()=>{}
            },
            deleteUser:{
                type:Function,
                default:()=>{}
            },

        },
        data(){
            return {

            }
        },
        mounted(){

        },
        methods:{
            sizeChange(currentSize) {
                this.$emit('size-change',currentSize)
            },
            currentChange(currentPage) {
                this.$emit('current-change',currentPage)
            },
            dateFormat(row,column){
                let date = row[column.property];
                if (date === undefined) {
                    return "";
                }
                this.$moment.locales()
                //let moment = require("moment");
                return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
            }
        }
    }
</script>

<style scoped>

</style>